<template>
	<view>
		<view class="header">
			用户邀请码注册
		</view>

		<view style="margin-top: 20rpx;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
				<uni-forms-item label="用户名" name="username">
					<input class="input" v-model="formData.username" type="text" placeholder="请输入用户名"
						@input="binddata('username',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="邀请码" name="inviteCode">
					<input class="input" v-model="formData.inviteCode" type="text" placeholder="请输入邀请码"
						@input="binddata('inviteCode',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<input class="input" v-model="formData.password" type="text" placeholder="请输入密码"
						@input="binddata('password',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="surepassword">
					<input class="input" v-model="formData.surepassword" type="text" placeholder="确认密码"
						@input="binddata('surepassword',$event.detail.value)" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">提交</button>
		</view>
		
		<view class="login" @click="gologin">
			已有账号?点击登录
		</view>

	</view>
</template>

<script>
	import {
		signUser
	} from '../../api/user.js'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					username: '',
					inviteCode: '',
					password: '',
					surepassword: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 3,
								maxLength: 20,
								errorMessage: '用户长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					inviteCode: {
						rules: [{
								required: true,
								errorMessage: '请输入邀请码',
							},
							{
								// pattern: /^[0-9a-zA-Z]{8}$/,
								minLength: 8,
								maxLength: 8,
								errorMessage: '邀请码格式不正确',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 8,
								errorMessage: '密码长度最少{minLength}个字符',
							}
						]
					},
					surepassword: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									// 异步需要返回 Promise 对象
									return new Promise((resolve, reject) => {
										setTimeout(() => {
											if (value == this.formData.password) {
												// 通过返回 resolve
												resolve()
											} else {
												// 不通过返回 reject(new Error('错误信息'))
												reject(new Error('两次输入密码不一致'))
											}
										}, 0)
									})
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(async res => {
					const obj = {}
					obj.username = res.username
					obj.inviteCode = res.inviteCode
					obj.password = res.password
					const response = await signUser(obj)
					console.log(response)
					if(response.statusCode == 802){
						if(response.data.msg == '用户名重复'){
							uni.showToast({
								title:'用户名重复',
								icon:'error'
							})
						} 
						if(response.data.msg == '邀请码无效'){
							uni.showToast({
								title:'邀请码无效',
								icon:'error'
							})
						}
					}
					if(response.statusCode == 200){
						uni.setStorageSync('token',response.data.data.token)
						this.$store.commit('initUserInfo',response.data.data)
						uni.showToast({
							title:'注册成功',
							success() {
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		padding-left: 80rpx;
	}

	.header {
		margin-top: 20rpx;
		font-size: 50rpx;
		letter-spacing: 5rpx;
	}

	.uni-forms-item {
		.input {
			width: 580rpx;
			height: 90rpx;
			text-align: center;
			background-color: #e8ebf2;
			border-radius: 45rpx;
			box-shadow: 0 0 2rpx rgba(150, 150, 150, .3);
		}
	}

	button {
		position: absolute;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		background-color: #57d75b;
	}
	
	.login {
		text-align: center;
		color: #007AFF;
		margin-left: -80rpx;
	}
</style>
